<template>
  <div class="page">
    <!-- 头部 左边通知和公告 右边设置 -->
    <mu-appbar style="width: 100%;" color="primary">
      {{title}}
      <mu-button flat slot="right">通知</mu-button>
    </mu-appbar>
    <!-- 中丄部分 头像和昵称 用户等级 -->
    <div class="top">
      <div class="top_left">
        <div class="top_left_img">
          <mu-avatar :size="size" color="primary">
            {{headImg}}
          </mu-avatar>
        </div>
      </div>
      <div class="top_right">
        <div class="name">昵称位置阿萨德撒打算打</div>
        <div class="leave">用户等级位置</div>
      </div>
    </div>
    <!-- 中部 我的功能  -->
    <div class="fun">
      <mu-list>
        <mu-list-item button :ripple="false" v-for="(item,index) in list" :key="index" @click="goItem(item.path)">
          <mu-list-item-action>
            <mu-icon :value="item.icon"></mu-icon>
          </mu-list-item-action>
          <mu-list-item-title>{{item.value}}</mu-list-item-title>
          <mu-list-item-action>
            <mu-icon value="keyboard_arrow_right"></mu-icon>
          </mu-list-item-action>
        </mu-list-item>
      </mu-list>
    </div>
    <!-- 底部导航 -->
    <Down></Down>
  </div>
</template>

<script>
  import Down from '@/components/common/commonDown'

  export default {
    name: "my",
    components: {Down},
    computed: {
      headImg() {
        return this.defaultHeadImg === '' ? 'K' : this.defaultHeadImg;
      }
    },
    data() {
      return {
        size: '80',
        defaultHeadImg: '',
        title: '个人中心',
        list: [
          {
            value: '我的发表', icon: 'add_circle', path: '/myReport'
          }, {
            value: '我的收藏', icon: 'star', path: '/myLike'
          }, {
            value: '浏览历史', icon: 'query_builder', path: '/myHistory'
          }, {
            value: '反馈信息', icon: 'launch', path: '/myFeedback'
          }, {
            value: '修改密码', icon: 'create', path: '/changePwd'
          }
        ]
      }
    },
    methods: {
      goItem(path) {
        this.$router.push({path: path})
      }
    }
  }
</script>

<style>
  .top {
    width: 100%;
    height: 15vh;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    /*background-color: #2196f3;*/
  }

  .top_left {
    height: 100%;
    display: flex;
    width: 40%;
    flex-direction: row;
    justify-content: center;
  }

  .top_left_img {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .top_right {
    height: 100%;
    display: flex;
    width: 50%;
    flex-direction: column;
    justify-content: space-evenly;
  }

  .name {
    color: #2196f3;
    font-size: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .leave {
    color: #2196f3;
    font-size: 16px;
    text-align: center;
  }

  .fun {
    width: 100%;
    margin-top: 20px;
  }
</style>
